<!DOCTYPE html>
<html>
<head>
<title th:text="#{eq.Menu}">菜单管理</title>
<link rel="stylesheet" th:href="@{/}+'layuiadmin/style/admin.css'" media="all">
<link rel="stylesheet" href="js/zTree/css/zTreeStyle/zTreeStyle.css" media="all">
<script type="text/javascript" src="js/zTree/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
      <div class="layui-row">
    <div class="layui-col-md2">
       <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="layui-col-md10">
    <div class="row" style="height:500px">
    	<div class="layui-btn-group">
	    <button type="button" class="layui-btn" data-type="add">增加</button>
	    <button type="button" class="layui-btn" data-type="move">移动</button>
	    <button type="button" class="layui-btn" data-type="batchDel">删除</button>
	    <button type="button" class="layui-btn" data-type="abandon">禁用</button>
	    <button type="button" class="layui-btn" data-type="resume">启用</button>
	    <button type="button" class="layui-btn" data-type="hide">隐藏</button>
	    <button type="button" class="layui-btn" name="orderevent" onclick="orderit(-1)">
  		<i class="layui-icon">&#xe619;</i> 上移
		</button>
	    <button type="button" class="layui-btn" name="orderevent" onclick="orderit(1)">
	  		<i class="layui-icon">&#xe61a;</i> 下移
		</button>
  </div>
      <table id="navi-table" lay-filter="navi-table"></table>
    </div>
    
    
    </div>
  </div>
    </div>
  </div>
</div>
<button style="display:none" id="uploadbtn">上传</button>
<script th:inline='none'>

layui.use(['table', 'tree','form','upload'], function(){
  var admin = layui.admin
  ,upload = layui.upload
  ,form = layui.form
  ,table = layui.table;
  window.selectMain = function(){
	  var checkStatus = table.checkStatus('navi-table')
	    ,checkData = checkStatus.data;
	  table.reload("btn-table",{where : {naviId:checkData[0].id}});
  }
  table.on("edit(btn-table)",function(obj){
		axios.post('sysButton/save',obj.data).then(
			res=>{
				layer.msg(i18n('eq.Saves'),{icon:1});
				table.reload('btn-table'); 
			}
		 )
	  })
  $("#uploadFast").on("click",function(){
	  var checkStatus = table.checkStatus('navi-table')
	    ,checkData = checkStatus.data;
	    
	  if(checkData.length === 0){
	      return layer.msg('请选择菜单');
	  }
	  var id = checkData[0].id;
	  if(checkData[0].url==""){
		  return layer.msg("快捷菜单必须是叶子节点");
	  }
	  $('#uploadbtn').click();
  })
  var treeSetting = {
		async: {
			enable: true,
			url:"navi/getNaviTree",
			autoParam:["id=pid"]
		},
		view:{
			showTitle: true,
			selectedMulti : false
		},callback:{
			onClick: function(event,treeId,node){
				var whr = {parentId:node.id};
				table.reload('navi-table',{
					loading:true,
					where: whr
					,page: {
						 curr: 1 //重新从第 1 页开始
					}
				});				
			}
		}
	};
	$.fn.zTree.init($("#treeDemo"), treeSetting);
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	  table.render({
		    elem: '#navi-table'
		    ,url: 'navi/getList' 
		    ,cols: [[
		      {type: 'numbers'}
		      ,{type: 'checkbox'}
		      ,{field: 'id', width: 100, title: 'ID',hide:true}
		      ,{field: 'parentId', title: '父ID',hide:true}
		      ,{field: 'name', title: '菜单名称',edit:'text', width: 200}
		      ,{field: 'url', title: 'URL',edit:'text',width:400}
		      ,{field: 'icon', title: '菜单图标',edit:'text',width:200}
		      ,{field: 'stateTxt', width: 110, title: '记录状态'}
		      ,{field: 'tier', title: '层级',edit:'text',width:90}
		      ,{field: 'orderno', title: '排序',edit:'text',width:90}
		    ]]
		    ,page: true
		    ,limit: 10
		    ,height: 465
		    ,text: '对不起，加载出现异常！'
		    ,done:function(){
		         enableRowClick(table,form,'navi-table',"navi-table");
		     }	
		  });
		  table.on("edit(navi-table)",function(obj){
			 $.ajax({
				 url: 'navi/modify',
				 type:'POST',
				 data:obj.data,
				 dataType:'json',
				 success:function(ret){
					 layer.msg("保存成功",{icon:1});
					 refreshNode();
					 table.reload('navi-table'); 
				 }
			 })
		  })
	window.orderit = function (d){
		var checkStatus = table.checkStatus('navi-table')
	    ,checkData = checkStatus.data; //得到选中的数据
	    
	    if(checkData.length === 0){
	      return layer.msg('请选择要改变排序的记录');
	    }
	    var ids = [];
	    for(let i=0;i<checkData.length;i++){
			  ids[i] = checkData[i].id;
		  }
		  $.ajax({
			  url:"navi/setOrderno",
			  type:'POST',
			  dataType:'JSON',
			  data:{ids: ids,direction:d},
			  success:function(ret){
				  table.reload('navi-table');
				  selectedRows(checkData,table,form,'navi-table','navi-table');
				  refreshNode();
			  }
		  })
	}
	
  function refreshNode(){
	  var selectedNodes = treeObj.getSelectedNodes();
	  if( selectedNodes.length==0){
		  treeObj.reAsyncChildNodes(null, "refresh");
	  }else{
		  $.ajax({
			  url:"navi/getChildCount",
			  type:'POST',
			  dataType:'JSON',
			  data:{id: selectedNodes[0].id},
			  success:function(ret){
				  selectedNodes[0].isParent = (ret.count > 0) ;
				  treeObj.reAsyncChildNodes(selectedNodes[0], "refresh");
			  }
		  })
		  
	  }
  }
  window.loadGrid = function(id){
	  
	  var checkStatus = "";
	  if(typeof(id)=="undefined"){
		  checkStatus = table.checkStatus('navi-table');
	      checkData = checkStatus.data; 
	  }else{
		  checkData = id;
	  }
	  table.reload('navi-table');
	  selectedRows(checkData,table,form,'navi-table','navi-table');
  }
  window.loadGrid2 = function(id){
	  table.reload('btn-table');
  }
  window.refreshNode = refreshNode;
  function getNaviById(id){
		var ret = "";
		$.ajax({
			url: 'navi/getById',
			async:false,
			data:{id:id},
			type:'POST',
			dataType:'json',
			success:function(v){
				ret = v;
			}
		})
		if(!ret){
			ret = "";
		}
		return ret;
	}
  var action = {
	batchDel: function(){
      var checkStatus = table.checkStatus('navi-table')
      ,checkData = checkStatus.data; //得到选中的数据
      var ids = [];
	  for(let i=0;i<checkData.length;i++){
		  ids[i] = checkData[i].id;
	  }
      if(checkData.length === 0){
        return layer.msg("请选择菜单记录");
      }
      layer.confirm("确定删除吗？", function(index) {
    	  $.ajax({
    		  url:"navi/delete",
    		  type:'POST',
    		  dataType:'json',
    		  data:{ids: ids},
    		  success:function(ret){
    			  table.reload('navi-table');
    			  refreshNode();
    	          layer.msg('已删除');
    		  }
    	  })
          
        })
    },abandon: function(){
        var checkStatus = table.checkStatus('navi-table')
        ,checkData = checkStatus.data; //得到选中的数据
        
        if(checkData.length === 0){
          return layer.msg('请选择要禁用的记录');
        }
        var ids = [];
  	    for(let i=0;i<checkData.length;i++){
  		  ids[i] = checkData[i].id;
  	    }
	  	$.ajax({
	  		  url:"navi/abandon",
	  		  type:'POST',
	  		  dataType:'json',
	  		  data:{ids: ids},
	  		  success:function(ret){
	  			loadGrid(ids[0])
	  	          layer.msg('已禁用');
	  		  }
	  	  })
      },hide: function(){
          var checkStatus = table.checkStatus('navi-table')
          ,checkData = checkStatus.data; //得到选中的数据
          
          if(checkData.length === 0){
            return layer.msg('请选择要隐藏的记录');
          }
          var ids = [];
    	    for(let i=0;i<checkData.length;i++){
    		  ids[i] = checkData[i].id;
    	    }
  	  	$.ajax({
  	  		  url:"navi/hide",
  	  		  type:'POST',
  	  		  dataType:'json',
  	  		  data:{ids: ids},
  	  		  success:function(ret){
  	  			loadGrid(ids[0])
  	  	          layer.msg('已隐藏');
  	  		  }
  	  	  })
        },resume: function(){
          var checkStatus = table.checkStatus('navi-table')
          ,checkData = checkStatus.data; //得到选中的数据
          
          if(checkData.length === 0){
            return layer.msg('请选择要启用的记录');
          }
          var ids = [];
    	    for(let i=0;i<checkData.length;i++){
    		  ids[i] = checkData[i].id;
    	    }
  	  	$.ajax({
  	  		  url:"navi/resume",
  	  		  type:'POST',
  	  		  dataType:'json',
  	  		  data:{ids: ids},
  	  		  success:function(ret){
  	  			  loadGrid(ids[0])
  	  	          layer.msg('启用成功');
  	  		  }
  	  	  })
        }
    
    ,add: function(){
    	var selectedNodes = treeObj.getSelectedNodes();
    	layer.open({
    		type: 2,
    		title:'增加菜单',
    		area:['700px','400px'],
    		content: 'rooter?url=system/navi/add-navi',
    		btn:['保存','关闭'],
    		yes:function(index,layero){
    			var dataForm = layer.getChildFrame('form', index);
    			var values = {};
    			dataForm.find(":input").each(function(i,v){
    				if(v.name)
    				values[v.name] = v.value;
    			})
    			$.ajax({
    				url:'navi/add',
    				data: values,
    				type:'POST',
    				dataType:'JSON',
    				success:function(ret){
    					layer.close(index);
    					table.reload('navi-table');
    					refreshNode();
    					
    				}
    			})
    		},
    		success: function(layero, index){
    		   
    		   var dataForm = layer.getChildFrame('form', index);
    		   if(selectedNodes.length!=0){
    			   dataForm.find("input[name=parentId]").val(selectedNodes[0].id);
    		   }
    		}
    	});    
    }
    ,move: function(){
    	var checkStatus = table.checkStatus('navi-table')
        ,checkData = checkStatus.data; 
        if(checkData.length === 0){
          return layer.msg('请选择要移动的菜单',{icon:0});
        }
        var movedId = checkData[0].id;
        var movedNavi = getNaviById(movedId);
    	layer.open({
    		type: 2,
    		title:'请选择移动的目标菜单',
    		area:['400px','600px'],
    		content:  'rooter?url=system/navi/move-navi',
    		btn:['移动到该菜单下','关闭'],
    		yes:function(index,layero){
    			
    			var iframeWin = window[layero.find('iframe')[0]['name']];
    			var destNodes = iframeWin.treeObj.getSelectedNodes();
    			if(destNodes.length==0){
    				return layer.msg("请选择目标菜单",{icon:0});
    			}
    			var values = {id:checkData[0].id,parentId:destNodes[0].id};
    			
    			if(values.parentId==movedId){
    				return layer.msg("不能将该菜单移动到自己下面");
    			}
    			if(movedNavi.parentId!==null && movedNavi.parentId!="null"){
    	        	if(movedNavi.parentId===destNodes[0].id){
    	        		return layer.msg("现在就在【"+destNodes[0].name+"】下面，不需要移动");
    	        	}
    	        }
    			$.ajax({
    				url: 'navi/move',
    				data: values,
    				type:'POST',
    				dataType:'JSON',
    				success:function(ret){
    					layer.close(index);
    					table.reload('navi-table');
    					var currentParentNodes = treeObj.getNodesByParam("id", values.parentId, null);
    					if(movedNavi.parentId!==null && movedNavi.parentId!="null"){
    						var oldParentNodes = treeObj.getNodesByParam("id", movedNavi.parentId, null);
    						$.ajax({
    		    				url: 'navi/countNodes',
    		    				data: {parentId: movedNavi.parentId},
    		    				type:'POST',
    		    				dataType:'JSON',
    		    				success:function(ret){
    		    					if(ret == 0){
    		    						oldParentNodes[0].isParent = false;
    		    					}
    	    						treeObj.updateNode(oldParentNodes[0]);
    		    				}
    						})
    						
    	    	        }
    					var movedNodes = treeObj.getNodesByParam("id", values.id, null);
    					if(currentParentNodes.length>0){
    						
    						if(movedNodes.length>0){
    							treeObj.moveNode(currentParentNodes[0],movedNodes[0], "inner");
    							movedNodes[0].parentId = currentParentNodes[0].id;
    							movedNodes[0].id = ret.data.id
    						}else{
    							currentParentNodes[0].isParent = true;
    							currentParentNodes[0].zAsync = false;
    						}
        					treeObj.updateNode(currentParentNodes[0]);
    					}else{
    						treeObj.removeNode(movedNodes[0]);
    					}
    					
    					
    				}
    			})
    		},
    		success: function(layero, index){
    			layer.title("将【"+checkData[0].name+"】移动到",index);
    		}
    	});    
    }
  };
  $('.layui-btn').not("[name=orderevent]").each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });

});
</script>
<script type="text/html" id="toolbar2">
    <div class="layui-btn-container">
		<div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="addBtn">增加按钮</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteBtn">删除按钮</button>
		</div>
    </div>
</script>
</body>